Live Markdown for web refactor #394
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Skalakid
changed the title
Skalakid
force-pushed
the
@Skalakid/web-parser-refactor
branch
from
0af6f58
to
f853061
Compare
Skalakid
force-pushed
the
@Skalakid/web-parser-refactor
branch
from
701962c
to
38693c4
Compare
|
I've been trying to fix this Android web issue (you can see some of my takeaways in the comments). It led me to if (!rootSpan || rootSpan.innerHTML !== dom.innerHTML) {
targetElement.innerHTML = '';
targetElement.innerText = '';
target.appendChild(dom);
if (BrowserUtils.isChromium) {
moveCursor(isFocused, alwaysMoveCursorToTheEnd, cursorPosition, target);
}
}I also contacted @BartoszGrajdek (shout out to him) to discuss it and he suggested to give this PR a try, as it refactors the web implementation. Here is what I discovered on both web and Android web: (I had to remove Case 1 - const [value, setValue] = React.useState(TEST_CONST.EXAMPLE_CONTENT);
+ const [value, setValue] = React.useState();Voice recognition works, markdown doesn't work Case 2 - const [value, setValue] = React.useState(TEST_CONST.EXAMPLE_CONTENT);
+ const [value, setValue] = React.useState('');Voice recognition doesn't work, markdown works To test the voice recognition, I started from an empty input and dictated a sentence, to test markdown I simply typed * bold * or something similar. |
6 tasks
BartoszGrajdek
force-pushed
the
@Skalakid/web-parser-refactor
branch
from
17fd595
to
a1bf047
Compare
Skalakid
force-pushed
the
@Skalakid/web-parser-refactor
branch
from
b5e9b86
to
4e895e9
Compare
BartoszGrajdek
approved these changes
Aug 21, 2024
6 tasks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Details
This PR refactors the web implementation of the Live Markdown library. The main goals of it are:
During this refactor phase we:
changed web live markdown HTML structure so now:
<p>- it makes structure much clear and organized, and enables us to apply custom logic to specific lines<span data-type="text">tag - by wrapping text with HTML element we enable many useful functions that aren't available in normal text node, for example:scrollIntoView()\ncharacters inside the input's HTML structure we use<br>tags - br tags give use much more flexibility and fix problem with cursor navigation when using arrow keys when moving between markdown components<br>tag is wrapped with<span data-type="br">tag - it fixes many problems connected to cursor positioningThanks to the new structure we enabled the usage of many styles that were generating a lot of bugs in the past, like
display: block. Also were able to remove all workarounds connected to cursor positioning.added HTML tree node structure, that represents current HTML dom and stores many important information about every element inside the input. Thanks to this tree structure we can easily interact with the markdown elements and we were able to completely refactor and improve the performance of cursor positioning algorithms
replaced all text value representation functions like
process valueornormalizeValuewith onetextContentvariable that always contains properly formatted text value without any additional newlines from contentEditablesplit long files of code into smaller ones, and sort functions into utils
prepared the code for new, more complex features like inline images
This refactor was made as a part of inline image feature. After discovering some structure and logic limitations when creating inline image POC we decided to improve Live Markdown for web.
This refactor will fix or unblock following issues:
Related Issues
GH_LINK
Manual Tests
Since it's a big change it would be great to test it in all cases connected to:
Linked PRs
Expensify/App#40181 (comment)